<!DOCTYPE html>
<html ng-app="root">
<head>
    <title>zstack-ui</title>
    <link href="{{ url_for('static', filename='css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/kendo/kendo.common.min.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/kendo/kendo.common-bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/kendo/kendo.uniform.min.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/kendo/kendo.dataviz.min.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/kendo/kendo.dataviz.uniform.min.css') }}" rel="stylesheet" />
    <!--
    <link href="{{ url_for('static', filename='css/kendo/kendo.dataviz.bootstrap.min.css') }}" rel="stylesheet" />
    -->
    <link href="{{ url_for('static', filename='css/font-awesome/css/font-awesome.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/ng-tags-input.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/zstack1.css') }}" rel="stylesheet" />
    <link rel="icon" href="{{ url_for('static', filename='images/zstack_text_icon_32x32.gif') }}" type="image/gif">
    <link rel="shorcut icon" href="{{ url_for('static', filename='images/zstack_text_icon_32x32.png') }}">
</head>


{% raw %}
<body ng-controller="MRoot.main" ng-cloak>

<script type="text/javascript">
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
        alert('ZStack Dashboard might not work well in IE.\nPlease use Chrome or Firefox to use ZStack Dashboard.');
</script>

<div class="modal fade hiden">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{"index.Modal title" | translate}}</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{"index.Close" | translate}}</button>
        <button type="button" class="btn btn-primary">{{"index.Save changes" | translate}} </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script id="successNotification" type="text/x-kendo-template">
    <div class="z-success">
        <h4><i class="fa fa-check-circle"></i>  SUCCESS</h4>
        <p>#= msg #</p>
        # if (data.link) { #
        <a href="#: link #">See result</a>
        #}#
    </div>
</script>

<script id="errorNotification" type="text/x-kendo-template">
    <div class="z-success">
        <h4><i class="fa fa-check-circle"></i>  FAILURE</h4>
        <p>#= msg #</p>
        # if (data.link) { #
        <a href="#: link #">See result</a>
        #}#
    </div>
</script>

<span kendo-notification="apiNotification" k-options="optionsNotification"></span>
<div ng-include="'/static/templates/zone/templates.html'"></div>

<div style="display: none">
    <div kendo-window="winChangePassword" k-visible="false" k-options="optionsChangePassword">
        <div>
            <h4 class="z-win-h4">{{"index.CHANGE PASSWORD" | translate}}</h4>
            <form class="form" id="formChangePassword">
                <div class="form-group col-lg-18">
                    <label for="name">{{"index.NEW PASSWORD" | translate}}</label>
                    <input class="form-control" type="password" id="newPassword" placeholder="(Required) max length of 255 characters" ng-model="modelChangePassword.password" required data-message="new password is required">
                </div>
                <div class="form-group col-lg-18">
                    <label for="name">{{"index.REPEAT PASSWORD" | translate}}</label>
                    <input class="form-control" type="password" id="repeatPassword" placeholder="(Required) max length of 255 characters" ng-model="modelChangePassword.repeatPassword" required data-message="repeat password is required">
                </div>
                <div class="form-group col-lg-18">
                    <button type="button" class="btn btn-default" ng-click="funcChangePasswordCancel(winChangePassword)">{{"index.Cancel" | translate}}</button>
                    <button type="button" class="btn btn-primary" ng-disabled="!modelChangePassword.canChange()" ng-click="funcChangePasswordDone(winChangePassword)">{{"index.Change" | translate}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header" ng-controller="MNav.Controller">
        <a class="navbar-brand" href="#">
            <span>&nbsp; ZStack {{ getZStackVersion() }}<img ng-show="funcIsProcessing()" src="static/img/ajax-loader.gif" width="17px" height="17px"> <span ng-show="funcIsProcessing()">{{ funcPendingRequestNum() }} requests in processing ...</span></span>
        </a>
    </div>

    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="/#/apiDetails">
                    {{"index.API Details" | translate}}
                    <span class="badge badge-info">{{getApiDetailsNum()}}</span>
                </a>
            </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown" >
                <a href class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-lg fa-language"></i>
                    {{"index.Language" | translate}}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href ng-click="changeLanguage('English')">English</a></li>
                    <li><a href ng-click="changeLanguage('Chinese (Simplified)')">简体中文</a></li>
                    <li><a href ng-click="changeLanguage('Chinese (Traditional)')">繁体中文</a></li>
                </ul>
            </li>
            <li class="dropdown" ng-show="isLogin()"> 
                <a href class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-lg fa-user"></i>
                    {{getAccountName()}}
                    <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href ng-click="changePassword(winChangePassword)">{{"index.Change Password" | translate}}</a></li>
                    <li><a href ng-click="logout()">{{"index.Sign Out" | translate}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid col-sm-24">
    <div class="row">
        <div id="sidebar" class="col-sm-4" ng-show="isLogin()">
            <div class="panel-group" id="menu">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-target="#image" href="/#/dashboard">
                             {{"index.Dashboard" | translate}}
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-target="#compute">
                            {{"index.Compute" | translate}}
                        </h4>
                    </div>
                    <div id="compute" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="/#/vmInstance" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-windows"></i>
                                    <span class="menu-name">{{"index.Instance" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/host" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-laptop"></i>
                                    <span class="menu-name"> {{"index.Host" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/cluster" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-th"></i>
                                    <span class="menu-name"> {{"index.Cluster" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/zone" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-cloud"></i>
                                    <span class="menu-name"> {{"index.Zone" | translate}}</span>&nbsp;
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-target="#image" href="/#/image">
                                {{"index.Image" | translate}}
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-target="#storage">
                                {{"index.Storage" | translate}}
                        </h4>
                    </div>
                    <div id="storage" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="/#/primaryStorage" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-hdd-o"></i>
                                    <span class="menu-name"> {{"index.Primary Storage" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/backupStorage" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-save"></i>
                                    <span class="menu-name"> {{"index.Backup Storage" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/volume" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-inbox"></i>
                                    <span class="menu-name"> {{"index.Volume" | translate}}</span>&nbsp;
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-target="#network">
                            {{"index.Network" | translate}}
                        </h4>
                    </div>
                    <div id="network" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="/#/l2Network" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-download"></i>
                                    <span class="menu-name"> {{"index.L2 Network" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/l3Network" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-sort-amount-asc"></i>
                                    <span class="menu-name"> {{"index.L3 Network" | translate}}</span>&nbsp;
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-target="#networkService">
                            {{"index.Network Service" | translate}}
                        </h4>
                    </div>
                    <div id="networkService" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="/#/securityGroup" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-shield"></i>
                                    <span class="menu-name"> {{"index.Security Group" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/vip" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-random"></i>
                                    <span class="menu-name"> {{"index.VIP" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/eip" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-random"></i>
                                    <span class="menu-name"> {{"index.EIP" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/portForwarding" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-random"></i>
                                    <span class="menu-name"> {{"index.Port Forwarding" | translate}}</span>&nbsp;
                                </a>
                                <a href="/#/virtualRouter" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-sitemap"></i>
                                    <span class="menu-name"> {{"index.Virtual Router" | translate}}</span>&nbsp;
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" data-target="#configuration">
                            {{"index.Configuration" | translate}}
                        </h4>
                    </div>
                    <div id="configuration" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="/#/instanceOffering" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-download"></i>
                                    <span class="menu-name"> {{"index.Instance Offering" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/diskOffering" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-sort-amount-asc"></i>
                                    <span class="menu-name"> {{"index.Disk Offering" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/virtualRouterOffering" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-download"></i>
                                    <span class="menu-name"> {{"index.Virtual Router Offering" | translate}}</span>&nbsp;
                                </a>

                                <a href="/#/globalConfig" class="list-group-item">
                                    <i class="fa fa-fw fa-sm fa-download"></i>
                                    <span class="menu-name"> {{"index.Global Configure" | translate}}</span>&nbsp;
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div ng-cloak class="ng-cloak">
            <div class="col-sm-20">
                <div ng-view=""></div>
            </div>
        </div>
    </div>
</div>

{% endraw %}

<script src="{{ url_for('static', filename='js/jquery-1.9.1.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular-route.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular-cookies.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular-translate.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular-translate-loader-static-files.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/angular-translate-storage-cookie.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/kendo.all.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/sha512.js') }}"></script>
<!--
<script src="{{ url_for('static', filename='js/angular-kendo.js') }}"></script>
-->
<script src="{{ url_for('static', filename='js/ng-tags-input.js') }}"></script>
<script src="{{ url_for('static', filename='app/app.js') }}"></script>
</body>

</html>
